<template>
  <div class="date-pop" @click.stop="cancel()">
    <div class="content" @click.stop>
      <div class="year">
        <span>年份:</span>
        <select v-model="selectYear">
          <option
            v-for="(key,val,index) in timeData.year"
            v-bind:value="key"
            :key="index"
          >{{ key }}年</option>
        </select>
        <!-- <svg-icon icon-class="icon_right" class="arr-bottom" /> -->
      </div>
      <div class="month" v-if="current == 1">
        <span>月份:</span>
        <select v-model="selectMonth">
          <option
            v-for="(key,val,index) in timeData.month"
            v-bind:value="val"
            :key="index"
          >{{ key }}</option>
        </select>
        <!-- <svg-icon icon-class="icon_right" class="arr-bottom" /> -->
      </div>
      <div class="quarter" v-if="current == 2">
        <span>季度:</span>
        <select v-model="selectQuarter">
          <option
            v-for="(key,val,index) in timeData.quarter"
            v-bind:value="val"
            :key="index"
          >{{ key }}</option>
        </select>
        <!-- <svg-icon icon-class="icon_right" class="arr-bottom" /> -->
      </div>
    </div>
    <div class="btn">
      <button class="cancel-btn" @click.stop="cancel()">取消</button>
      <button class="confirm-btn" @click.stop="confirm()">确定</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    timeData: {
      type: Object,
      default: function() {
        return {
          year: {},
          quarter: {},
          month: {}
        }
      }
    },
    current: {
      // type: Number,
      default: 1 // 1月份,2季度,0年
    }
  },
  data() {
    return {
      selectYear: '1',
      selectQuarter: '1',
      selectMonth: '1'
    }
  },
  mounted() {
    this.selectYear = +this.timeData.currentYear
    this.selectQuarter = +this.timeData.currentQuarter
    this.selectMonth = +this.timeData.currentMonth
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    confirm() {
      this.$emit('confirm', {
        selectYear: this.selectYear,
        selectQuarter: this.selectQuarter,
        selectMonth: this.selectMonth
      })
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
.miniprogram-root {
  .date-pop {
    .content {
      div {
        display: flex;
        align-items: center;
        select {
          margin-left: 6px;
          line-height: 38px
        }
      }
    }
  }
}
.date-pop {
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:1;
  background-color: rgba(0, 0, 0, 0.5);
  .content {
    padding: 40px 30px 80px;
    background-color: #fcfcfc;
    display: flex;
    align-items: center;
    div {
      position: relative;
      &.month,&.quarter{
        margin-left:40px;
      }
      span{
        font-size: 26px;
      }
      select {
        padding: 15px 30px 15px 20px;
        width:210px;
        height:68px;
        border:2px solid #EDEDED;
        border-radius: 8px;
        font-size: 26px;
        color: #999;
      }
    }
  }
  .btn {
    display: flex;
    box-shadow: 0 -4px 12px -2px #f1f1f1;
    button {
      flex: 1;
      height: 88px;
      line-height: 88px;
      outline: none;
      border: none;
      font-size: 28px;
      background-color: $default;
      text-align: center;
      &:last-child {
        @include gradient(right, #FE1B49, #E90104);
        color: $default;
      }
    }
  }
}
</style>